
<div class="layui-body-header">
	<h2>产品列表</h2>
</div>
	<div class="layui-card-body">
		<div class="layui-fluid">
			<div class="layui-card">
		      <div class="layui-card-header">
		        <!-- <span>所有会员列表</span> -->
		        
		        <!--<a href="#/layui/editProd" class="layui-btn layui-btn-sm">
		          <i class="layui-icon">&#xe654;</i>
		          <span>添加</span>
		        </a>-->
		        <button type="button" class="layui-btn layui-btn-sm layui-btn-primary downs">
	              <i class="layui-icon">&#x1007;</i>
	              <span>下架</span>
	            </button>
		        <button type="button" class="layui-btn layui-btn-sm layui-btn-danger batchDel">
		          <i class="layui-icon">&#xe640;</i>
		          <span>批量删除</span>
		        </button>
		        <!--<a href="#/member/all/edit" class="layui-btn layui-btn-sm layui-btn-primary">
		          <i class="layui-icon">&#xe62f;</i>
		          <span>导出到Excel</span>
		        </a>-->
		        
		        <a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-primary" id="search_hash">
		          <i class="layui-icon">&#xe615;</i>
		        </a>
		      </div>
		      <div class="layui-card-body">
		        <table id="test" lay-filter="test"></table>
		        <script type="text/html" id="bartest">
		        	<!--<button class="layui-btn layui-btn-xs layui-btn-primary" type="button" lay-event="shenhe">下架</button>-->
		          <button class="layui-btn layui-btn-xs" type="button" lay-event="detail">编辑</button>
		          
		          <!-- <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> -->
		          <!--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
		        </script>
		      </div>
	      </div>
      </div>
    </div>
      

<script type="text/html" id="search_tpl_hash">
  <form class="layui-form" action="">
    <div class="layui-form-item">
      <label class="layui-form-label ">会员ID</label>
      <div class="layui-input-block">
        <input type="text" name="memId" id="memId" placeholder="" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">会员姓名</label>
      <div class="layui-input-block">
        <input type="text" name="memName" id="memName" placeholder="" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">商品名称</label>
      <div class="layui-input-block">
        <input type="text" name="s_prodName" id="s_prodName" placeholder="" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">会员手机号</label>
      <div class="layui-input-block">
        <input type="text" name="memTel" id="memTel" placeholder="" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">是否上架</label>
      <div class="layui-input-block">
        <select name="s_isput" id="s_isput">
          <option value="2">全部</option>
          <option value="1">是</option>
          <option value="0">否</option>
        </select>
      </div>
    </div>
    
    <div class="layui-form-item">
      <div class="layui-input-block">
        <!--<button class="layui-btn" lay-submit lay-filter="formtest"><i class="layui-icon">&#xe615;</i> 搜索</button>-->
        <button class="layui-btn" lay-submit lay-filter="formtest"><i class="layui-icon">&#xe615;</i> 搜索</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
</script>

<!--头部工具栏-->
<script type="text/html" id="toolbarDemo">
</script>

<script>
	let downs = document.querySelector(".downs");
	var batchDel = document.querySelector(".batchDel");
	let checkedArr = [];
	let objArr = [];

  layui.config({
    base: '/src/js/'
  }).use(['jquery', 'mockjs', 'table', 'sidebar', 'form'], function () {
    var $ = layui.jquery,
      layer = layui.layer,
      table = layui.table,
      sidebar = layui.sidebar,
      form = layui.form;
    // 注入mock
    
    
    
    
    layui.mockjs.inject({
      'POST /demo/table/user': {
        code: 0,
        msg: "xxx",
        count: 1000,
        'data|20': [{
          'id|+1': 1,
          username: '@name',
          sex: '@boolean',
          city: '@city',
          sign: '@csentence',
          experience: '@integer',
          score: '@integer',
          classify: '@word',
          wealth: '@integer',
          auth: '@boolean'
        }]
      }
    });
    //第一个实例
    table.render({
      method: 'post',
      // size: 'sm',
      limit: 10,
      limits: [10,20,30],
      elem: '#test',
      id:'test',
      toolbar: '#toolbarDemo',
      height: 'full-235',
//    defaultToolbar: ['filter', 'print', 'exports'],
//    toolbar: 'default',
      url: 'https://xnsmb.xnsoft.net.cn/api/Filtrate_Xn_Product', //数据接口
      parseData: function(res){
      	return {
      		'code':0,
      		'count':res.TotalCount,
//      		 "count": res.TotalCount, //解析数据长度
      		"data":res._Data
      	};
      },
      contentType: 'application/json',
      page: true, //开启分页
//    parseData: function(res){
//    	return {
//    		'code':0,
//    		'count':res.CountPage,
//    		"data":res._Data
//    	};
//    },
      request: {
		    pageName: 'CurrentPage' //页码的参数名称，默认：page
		    ,limitName: 'PageSize' //每页数据量的参数名，默认：limit
		  },
	  where: {
//		  "MemLoginId": "",
//		  "MemberName": "",
//		  "MemberMobile": "",
//		  "Name": "",
		  "IsAudit": 2,
      },
      cols: [
        [ //表头 
          {
//          field: 'id',
//          title: '会员ID',
			type: 'checkbox',
//          width: 80,
            sort: true,
            align: 'center',
            fixed: 'left'
          }, {
            field: 'ProductName',
            title: '商品名称',
            align: 'center',
//          width: 180
          }, {
            field: 'MemberName',
            title: '会员名称',
            align: 'center',
//          width: 120
          },{
            field: 'MemLoginId',
            title: '会员ID',
            align: 'center',
//          width: 150
          }, {
            field: 'MemberMobile',
            title: '会员手机号',
            align: 'center',
//          width: 177
          }, {
            field: 'ShopPrice',
            title: '售价',
            align: 'center',
            width: 100
          }, {
            field: 'CreateTime',
            title: '上架时间',
            align: 'center',
//          width: 70
          }, 
          {
            field: 'IsAudit',
            align: 'center',
            title: '是否上架',
            width: 100,
            templet:function(d){
            	if(d.IsAudit==0){
            		return '<span>否</span>'
            	}else if(d.IsAudit==1){
            		return '<span>是</span>'
            	}
            }
          }, 
//        {
//          field: '',
//          title: '下架原因',
////          width: 150
//        }, 
          {
            fixed: 'right',
//          width: 120,
            align: 'center',
            toolbar: '#bartest'
          }
        ]
      ]
    });

    $('#search_hash').on('click', function () {
      var that = this;
      // console.log($('#search_tpl_hash').html());
      sidebar.render({
        elem: that,
        content: $('#search_tpl_hash').html(),
        title: '搜索',
        shade: true,
        // shadeClose:false,
        // direction: 'left'
        // dynamicRender: false,
        // url: 'views/member/all/search.html',
        width: '500px', //可以设置百分比和px
        done: function () {
          console.log('ccc');
          form.render();

          //监听提交
          form.on('submit(formtest)', function (data) {
            // layer.msg(JSON.stringify(data.field));
            console.log($("select[name='s_isput'] option:selected").val())
            table.reload('test', {
              where: {
                		"MemLoginId": $("#memId").val(),
						"MemberName": $("#memName").val(),
						"MemberMobile": $("#memTel").val(),
						"Name": $("#s_prodName").val(),
						"IsAudit": $("#s_isput option:selected").val(),
              }
            });
            return false;
          });
        }
      });
    });
    
    downs.addEventListener("click",function(){
    	if(checkedArr.length!=0){	
	    	layer.confirm('确认下架？', function(index){
	    		layer.close(index);	
	    		checkedArr.forEach((el,index)=>{
	    			DBHelper.Get("Admin_Xn_Product?id="+el,function(data){
	    				console.log(data)
	    				let _obj = data;
	    				_obj.IsAudit=0;
	    				DBHelper.Put("Admin_Xn_Product?id="+el,_obj,function(data){
	    					console.log(data)
	    					table.reload('test', {});
	    				},function(data){
	    					console.log(data)
	    				})
	    			},function(data){
	    				console.log(data)
	    			})
	    		})
	    		
//	    		window.location.reload();
	    	})
	    	}else if(checkedArr.length==0){
			layer.alert("请选择至少一个选项")
		}
	    })
    
    
//  table.on('checkbox(test)', function(obj){
////		  console.log("obj.checked",obj.checked); //当前是否选中状态
////		  console.log("obj.data",obj.data); //选中行的相关数据
////		  console.log("obj.type",obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
//			console.log(obj.data)
//			if(obj.type=="one"){
//				if(obj.checked){
//					objArr.push(obj)
//					checkedArr.push(obj.data.Guid)
//					console.log(objArr)
//				}else if(!obj.checked){
//					objArr.splice(objArr.indexOf(obj.data),1)
//					checkedArr.splice(checkedArr.indexOf(obj.data.Guid),1)
//					console.log(objArr)
//				}
//			}
//		
//		});

table.on('checkbox(test)', function(obj){
			var checkStatus = table.checkStatus('test');
			let temp = [];
			let tempObj = [];
			checkStatus.data.forEach((el,index)=>{
				temp.push(el.Guid);
			})
			checkedArr = temp;
			console.log(temp)
		});
    
    
    table.on('tool(test)',function(obj){
    	toolHandel("#/layui/editProd?id=","Admin_Xn_Product/",obj,"#/layui/busiDetail?id=","","","");
    })
    
    
    
//  批量删除
//  batchDel.addEventListener("click",function(){
//  	batDel("Admin_Xn_Product/",checkedArr,objArr)
//  	
//  })
    batchDel.addEventListener("click",function(){
    	if(checkedArr.length!=0){
    		layer.confirm('确认删除？', function(index){
					layer.close(index);	
					console.log("checkedArr",checkedArr)
					DBHelper.Delete("Admin_Xn_Product",checkedArr,function(data){
				      	console.log(data)
				      },function(data){
				      	table.reload('test', {
								});
				      	console.log(data)
				      })
					
		    });
    	}else if(checkedArr.length==0){
			layer.alert("请选择至少一个选项")
		}
			
			
    })
    
    
    
    
  });
</script>

<link rel="stylesheet" type="text/css" href="../../css/layui.css"/>
<style scoped>
		.prodListInfo{
			margin-top: 20px;
		}
		.prodListInfo-table tr>th{
			text-align: center;
		}
		.prodListInfo-table tr>td{
			text-align: center;
		}
      	.block{
      		display: block;
      	}
      	.prodListTop-btn{
      		width: 100%;
      		text-align: center;
      		margin-bottom: 50px;
      	}
      	.prodListInfo{
      		margin-top: 20px;
      	}
      	.prodListTop-btn button{
      		display: inline-block;
      		width: 200px;
      		border-radius: 5px;
      	}
      	.title{
      		margin-left: 30px;
      		margin-top: 30px;
      	}
      	.save-warp{
      		width: 100%;
      		text-align: center;
      		margin-top: 20px;
      	}
      	.save-warp button{
      		display: inline-block;
      		width: 160px;
      	}
      	.prodList-top{
      		margin-top: 20px;
      		margin-bottom: 30px;
      		display: flex;
      		justify-content: space-between;
      	}
      	.prodList-table{
      		background-color: rgba(0,0,0,0);
      	}
      	
      	
      </style>

<style scoped>
		.webManInfo-table tr>th{
			text-align: center;
		}
		.webManInfo-table tr>td{
			text-align: center;
		}
      	.block{
      		display: block;
      	}
      	.webManTop-btn{
      		width: 100%;
      		text-align: center;
      		margin-bottom: 30px;
      	}
      	.pupoInfo{
      		margin-top: 20px;
      	}
      	.webManTop-btn button{
      		display: inline-block;
      		width: 200px;
      		border-radius: 5px;
      	}
      	.title{
      		margin-left: 30px;
      		margin-top: 30px;
      	}
      	.save-warp{
      		width: 100%;
      		text-align: center;
      		margin-top: 20px;
      	}
      	.save-warp button{
      		display: inline-block;
      		width: 160px;
      	}
      	.webMan-top{
      		display: flex;
      		justify-content: space-between;
      		margin-top: 30px;
      		margin-bottom: 30px;
      	}
      	.webMan-table{
      		background-color: rgba(0,0,0,0);
      	}
      	
      	
      </style>